<template>
  <div>
    <div class="add-main border_">
      <div class="add-main-body">
        <van-button type="primary" class="add-button">{{ single }}</van-button>
        <div class="add-info">
          <div class="add-info-name">{{ checkPersonInfo.name }}</div>
          <div :class="checkPersonInfo ? 'add-info-tip' : 'add-info-warn'" @click="handleCheck">
            {{ tips }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { CheckPerson } from '@/api/types.js'
import { computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const props = defineProps<{
  checkPersonInfo: CheckPerson
}>()
const checkPersonInfo = props.checkPersonInfo
const tips = checkPersonInfo === null ? ref<string>('请按要求做TST筛查') : '点击此处开始筛查'
const single = computed(() => {
  return checkPersonInfo.name.split('')[0]
})

console.log('用户信息:', checkPersonInfo)
const handleCheck = () => {
  router.push({
    path: '/topic',
    query: {
      checkPersonId: checkPersonInfo.id,
    },
  })
}
</script>

<style scoped lang="scss">
.border_ {
  border: 1.2px solid #d4d4d4;
  border-radius: 4px;
}

.border_:hover {
  border: 2px solid #00d1ae;
}

.add-main {
  display: flex;
  justify-content: center; /* Center content horizontally */
  align-items: center;
  width: 84%;
  margin: 1rem auto;
  height: 4.6rem;
}

.add-main-body {
  display: flex;
  align-items: center;
  width: 85%;
  height: 3.3rem;
  margin: 0 auto;
}

.add-button {
  border-radius: 35px;
  width: 15%;
  height: 80%;
  background-image: linear-gradient(#00de91, #01ccc4);
  display: flex;
  justify-content: center;
  align-items: center;
}

.add-info {
  display: flex;
  justify-content: space-between; /* Distribute space evenly between items */
  align-items: center; /* Center both items vertically */
  width: 100%; /* Ensure it takes full width */
  padding-left: 10px; /* Adjust space between button and info */
}

.add-info-name {
  flex-shrink: 0; /* Prevent shrinking */
  max-width: 50%; /* Limit width to avoid overflowing */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
  font-weight: 500;
}

.add-info-warn {
  flex-grow: 1; /* Allow it to grow and take remaining space */
  font-size: 15px;
  font-weight: 900;
  color: #453cca;
  text-align: right; /* Right-align the warning message */
}

.add-info-tip {
  flex-grow: 1; /* Allow it to grow and take remaining space */
  font-size: 15px;
  font-weight: 900;
  color: #ca5d56;
  text-align: right; /* Right-align the warning message */
}
</style>
